<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--  条件渲染-->

<!--   1.v-if
           写法：
              v-if = "表达式"
              v-else-if = "表达式"
              v-else
           适用于：切换频率较低的场景
           特点：不展示的dom节点元素直接删除
           注意：v-if可以和 v-else-if、v-else一起使用，但要求结构不能被打断
-->
  <h1>n={{n}}</h1>
  <button @click="n++">点我n++</button>

  <template>
    <h1 v-if="n===1">Vue</h1>
    <h1 v-else-if="n===2">Vue1</h1>
    <h1 v-else-if="n===3">Vue3</h1>
    <h1 v-else>点击按钮我会变化！</h1>
  </template>
  <!-- 2. v-if配合 template标签使用，不打乱dom结构(template不会在加载到dom节点)
          v-show不能搭配template
   -->
  <template v-if="n===4">
    <h1>Vue4</h1>
  </template>

<!--   3. v-show
            写法：
              v-show="表达式"
              适用于：切换频率较高的场景
              特点：不展示的dom节点元素不会删除，只是将dom元素隐藏，不占位
              注意：使用v-show切换时，不展示的dom元素也会渲染，但隐藏，不占位
-->
  <h1 v-show="n===5">Vue5</h1>


</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false;
  new Vue({
    el: '#root',
    data:{
      n:0
    },
    computed:{

    },
    methods:{

    }
  })
</script>
</html>
